<template>
   <div class="centent">
        <div class="nag">
            <div class="nag1">
                <p>河南省郑州市金水区中州大道农业路苏荷中心1926室</p>
                <p><span>李航</span>155****7268</p>
                <span>默认</span>
            </div>
            <img src="/static/imgs_s05/s05_colorbar.png" alt="">
        </div>
        <div class="commodity">
            <div class="commodity1">
                <div class="commodity1-1">
                    <img src="/static/imgs_s05/s05_bjxb.png" alt="">
                </div>
                <div class="commodity1-2">
                    <ul>
                        <li class="commodity1-4">江小白 JOYYOUTH 500ml*4瓶 40度清香型白酒整箱装</li>
                        <li>数量: 2</li>
                        <li class="commodity1-3"><em>￥</em>109.80</li>
                    </ul>
                    <div class="colu">
                        <ul>
                            <li class="colu1">-</li>
                            <li><em>2</em></li>
                            <li class="colu2">+</li>
                        </ul>
                    </div>
                </div>
            </div>


            <div class="commodity1">
                <div class="commodity1-1">
                    <img src="/static/imgs_s05/s05_m.png" alt="">
                </div>
                <div class="commodity1-2">
                    <ul>
                        <li class="commodity1-4">韩国进口三养火鸡面超级辣鸡味拌面700g方便面</li>
                        <li>数量: 1</li>
                        <li class="commodity1-3"><em>￥</em>19.80</li>
                    </ul>
                    <div class="colu">
                        <ul>
                            <li class="colu1">-</li>
                            <li><em>2</em></li>
                            <li class="colu2">+</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="coupon">
            <div class="coupon1">
                <p>优惠卷</p>
            </div>
            <div class="coupon2">
                <span>请选择</span>
                <img src="/static/imgs_s05/s05_left.png" alt="">
            </div>
        </div>

        <div class="order">
            <h3>订单备注:</h3>
            <p>请输入备注信息:</p>
        </div>

        <div class="check">
           <div class="s1">
               <span>商品总额</span>
               <span>￥129.70</span>
           </div>
           <div class="s1">
            <span>抵扣金额</span>
            <span class="a11">-￥0.00</span>
        </div>
        <div class="s1">
            <span>运费</span>
            <span>￥0.00</span>
        </div>
        <div class="s1">
            <span>需付款</span>
            <span class="a11">￥129.70</span>
        </div>
        </div>
        <div class="bottom">
            <div class="bottom1">
                <p><span>￥</span>129.70</p>
            </div>
            <div class="bottom2">
                <p>提交订单</p>
            </div>
        </div>
    </div>
</template>

<script>

export default {
  data () {
    return {
      
      }
    },

  methods: {
   
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>

        .centent {
            position: relative;
            display: flex;
            width: 100%;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 767px;
            background: #CCC;
            /* padding-bottom: 200px; */
        }

        .nag {
            position: relative;
            /* overflow: hidden; */
            margin-bottom: 7px;
        }

        .nag .nag1>p {
            display: inline-block;
            margin-top: 15px;
            margin-left: 11px;
            font-size: 15px;
            font-family: "Source Han Sans CN";
            font-weight: 500;
            color: rgba(38, 38, 38, 1);
            width: 301px;
            height: 32px;
        }

        .nag .nag1 {
            overflow: hidden;
            position: relative;
            margin-top: 10px;
            background: white;
            width: 362px;
            height: 91px;
            border-radius: 10px;
            padding-bottom: 10px;
        }

        .nag .nag1 p span:nth-child(1) {
            display: inline-block;
            width: 30px;
            height: 13px;
            line-height: 13px;
            color: #2E2D2D;
            background: rgba(255, 255, 255, 1);
            border-radius: 12px;
            margin-left: 11px;
            margin-right: 18px;
        }

        .nag1 p:nth-child(2) {
            /* width: 362px;
            height: 91px; */
            background: rgba(255, 255, 255, 1);
            border-radius: 12px;
        }

        .nag1>span {
            position: absolute;
            width: 20px;
            height: 8px;
            font-size: 10px;
            font-family: "Source Han Sans CN";
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            padding-left: 5px;
            padding-right: 5px;
            padding-bottom: 6px;
            background: #32B16C;
            left: 170px;
            top: 72px;
        }

        .nag img {
            position: absolute;
            /* margin-top: -5px; */
            bottom: 0px;
            width: 360px;
            height: 5px;
        }

        .commodity {
            width: 362px;
            height: 229px;
            display: flex;
            flex-direction: column;
            /* flex-direction: row-reverse; */
            /* background: skyblue; */
        }

        .commodity1 {
            width: 362px;
            height: 114px;
            display: flex;
            background: white;
        }

        .commodity1 img {
            width: 91px;
            height: 91px;
        }

        .commodity1-2 em {
            font-style: normal;
            font-size: 10px;
        }

        .commodity1-2 {
            display: flex;
            flex-direction: column;
            margin-left: 12px;
            position: relative;
        }

        .colu ul {
            width: 60px;
            /* height: 27px; */
            line-height: 27px;
            display: flex;
            flex-direction: row;
            /* justify-content: center; */
            /* align-items: center; */
        }

        .colu ul li {
            width: 33px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            border: 1px solid #BBB;
        }

        .colu ul li.colu1 {
            border: 1px solid #BBB;
            border-top-left-radius: 6px;
            border-bottom-left-radius: 6px;
            color: #40AF75;
            border-right: none;
        }

        .colu ul li.colu2 {
            border-left: none;
            color: #40AF75;
            border-top-right-radius: 6px;
            border-bottom-right-radius: 6px;
        }

        .commodity1-2 .commodity1-4 {
            display: inline-block;
            width: 245px;
            height: 29px;
            font-size: 12px;
            margin-top: 5px;
            margin-bottom: 18px;
            font-family: "Source Han Sans CN";
            font-weight: 400;
            color: rgba(44, 44, 47, 1);
            line-height: 17px;
        }

        .commodity1-2 li:nth-child(2) {
            font-size: 11px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: rgba(140, 140, 140, 1);
            line-height: 21px;
        }

        .commodity1-2 .commodity1-3 {
            display: inline-block;
            font-size: 11px;
            font-family: "Source Han Sans CN";
            font-weight: 500;
            color: rgba(233, 91, 77, 1);
            line-height: 0px;
            margin-top: 5px;
        }

        .commodity1-2 .colu ul {
            position: absolute;
            right: 18px;
            bottom: 20px;
        }

        .coupon {
            background: rgba(255, 255, 255, 1);
            border-radius: 12px;
            display: flex;
            justify-content: space-around;
            width: 362px;
            height: 46px;
            line-height: 46px;
            /* justify-content: center; */
        }


        .coupon2 {
            font-size: 13px;
            font-family: "Source Han Sans CN";
            font-weight: 400;
            color: rgba(140, 140, 140, 1);
        }

        .coupon2 img {
            width: 8px;
            height: 8px;
        }

        .order {
            margin-top: 9px;
            width: 362px;
            height: 104px;
            border-radius: 12px;
            /* background: ; */
            background: rgba(255, 255, 255, 1);
        }

        .order h3 {
            /* display: inline-block; */
            margin-left: 11px;
            margin-top: 18px;
            margin-bottom: 13px;
            /* width: 362px;
            height: 104px; */
            /* background: rgba(255, 255, 255, 1); */
            border-radius: 12px;
        }

        .order p {
            margin-left: 11px;
            font-size: 13px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: rgba(140, 140, 140, 1);
        }

        .check {
            margin-top: 10px;
            box-sizing: border-box;
            width: 362px;
            height: 151px;
            background: rgba(255, 255, 255, 1);
            border-radius: 12px;
        }

        .check table {
            width: 362px;
            height: 151px;
            font-size: 12px;
            /* background: rgba(255, 255, 255, 1); */
            border-radius: 12px;
        }

        .check tr {
            width: 181px;
            height: 15px;
            line-height: 15px;
        }

        .check table tr td {
            padding-left: 12px;
        }

        .check1 {
            text-align: right;
            padding-right: 18px;
            padding-left: 100px;
            color: #1D1E1E;
        }

        .check table .check2 {
            height: 20px;
            /* background: red; */
        }

        .check1-1 {
            color: red;
        }

        .bottom {
            box-sizing: border-box;
            margin-top: 9px;
            display: flex;
            width: 375px;
            height: 44px;
            justify-content: space-between;
            background: rgba(255, 255, 255, 1);
            position: fixed;
            bottom: 0px;
        }

        .bottom1 {
            width: 200px;
            height: 44px;
            line-height: 44px;
            margin-left: 22px;
            font-size: 13px;
            font-weight: 400;
            color: rgba(233, 91, 77, 1);
        }

        .bottom2 {
            text-align: center;
            width: 175px;
            height: 44px;
            line-height: 44px;
            background: #32B16C;

            font-size: 14px;
            font-weight: 500;
            color: rgba(253, 249, 248, 1);
        }

        .bottom1 span {
            font-size: 10px;
        }
        .s1{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            font-size: 16px;
            box-sizing: border-box;
            padding-left: 15px;
            padding-right: 15px;
            height: 37px;
            line-height: 37px;
        }
        .a11{
            color: red;
        }
    </style>